<template>
  <div>
      <div class="nav-bar-div">
        <div class="div-align-justify-center" @click="onClickLeft">
          <img class="icon-24" src="@/static/icon/24px_arrow_left.png" alt=""/>
        </div>
        <div class="nav-bar-title div-align-justify-center body-heavy">{{ title + '待办列表' }}</div>
      </div>
      <div class="body-content last-item">
        <field-textarea ref="descTextarea"
                        :value="value"
                        :limit-count="limitCountNumber"
                        :placeholder="placeholderString"
        ></field-textarea>
      </div>
      <button-center :button-name="buttonName"
                     :disable="$refs.descTextarea && $refs.descTextarea.getValueLength() === 0"
                     @click.native="sureConfirm"
      ></button-center>
  </div>
</template>
<script>
import { NavBar } from "vant";
import ButtonCenter from "@/components/Button/Center"
import FieldTextarea from '@/components/Field/Textarea'

export default {
  name: "TodoTextarea",
  props: {
    title: {type: String, default: () => '编辑'},
    buttonName: {type: String, default: () => '确定'},
    value: {type: String, default: () => ''},
  },
  components: {
    [NavBar.name]: NavBar,
    ButtonCenter,
    FieldTextarea,
  },
  data() {
    return {
      placeholderString:'最多输入100个字',
      limitCountNumber: 100,
      textareaValue: this.value,
    };
  },
  methods: {
    sureConfirm() {
      this.$emit("todoSureConfirmEvent", this.$refs.descTextarea.desc)
    },
    onClickLeft() {
      this.$emit("todoTextareaLeftEvent")
    },

  },
};
</script>

<style scoped>
.nav-bar-div {
  display: flex;
  margin-top: 8px;
  margin-left: 16px;
  height: 44px;
}
.nav-bar-title {
  width: 80%;

}
.last-item {
  margin-top: 16px;
  margin-bottom: 90px;
}
</style>
<style>
.van-nav-bar .van-icon {
  color: #242424;
}
</style>